{% extends 'IcsocUIBundle::base.html.twig' %}

{% block content %}
    <div class="col-xs-12 col-sm-4">
        <div class="widget-box">
            <div class="widget-header">
                <h4 class="widget-title">Masked Input</h4>

												<span class="widget-toolbar">
													<a href="#" data-action="settings">
                                                        <i class="ace-icon fa fa-cog"></i>
                                                    </a>

													<a href="#" data-action="reload">
                                                        <i class="ace-icon fa fa-refresh"></i>
                                                    </a>

													<a href="#" data-action="collapse">
                                                        <i class="ace-icon fa fa-chevron-up"></i>
                                                    </a>

													<a href="#" data-action="close">
                                                        <i class="ace-icon fa fa-times"></i>
                                                    </a>
												</span>
            </div>

            <div class="widget-body">
                <div class="widget-main">
                    <div>
                        <label for="form-field-mask-1">
                            Date
                            <small class="text-success">99/99/9999</small>
                        </label>

                        <!-- #section:plugins/input.masked-input -->
                        <div class="input-group">
                            <input class="form-control input-mask-date" type="text" id="form-field-mask-1" />
															<span class="input-group-btn">
																<button class="btn btn-sm btn-default" type="button">
                                                                    <i class="ace-icon fa fa-calendar bigger-110"></i>
                                                                    Go!
                                                                </button>
															</span>
                        </div>

                        <!-- /section:plugins/input.masked-input -->
                    </div>

                    <hr />
                    <div>
                        <label for="form-field-mask-2">
                            Phone
                            <small class="text-warning">(999) 999-9999</small>
                        </label>

                        <div class="input-group">
															<span class="input-group-addon">
																<i class="ace-icon fa fa-phone"></i>
															</span>

                            <input class="form-control input-mask-phone" type="text" id="form-field-mask-2" />
                        </div>
                    </div>

                    <hr />
                    <div>
                        <label for="form-field-mask-3">
                            Product Key
                            <small class="text-error">a*-999-a999</small>
                        </label>

                        <div class="input-group">
                            <input class="form-control input-mask-product" type="text" id="form-field-mask-3" />
															<span class="input-group-addon">
																<i class="ace-icon fa fa-key"></i>
															</span>
                        </div>
                    </div>

                    <hr />
                    <div>
                        <label for="form-field-mask-4">
                            Eye Script
                            <small class="text-info">~9.99 ~9.99 999</small>
                        </label>

                        <div>
                            <input class="input-medium input-mask-eyescript" type="text" id="form-field-mask-4" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div><!-- /.span -->
{% endblock %}
{% block javascript_footer %}
    {% javascripts
    '@maskInput_js'
    filter='uglifyjs'
    %}
    <script src="{{ asset_url }}"></script>
    {% endjavascripts %}
    {{ parent() }}
{% endblock %}
{% block footer %}


    <script>
//        jQuery(function($) {
//                var tag_input = $('#form-field-tags');
//                tag_input.tag({
//                            placeholder:tag_input.attr('placeholder'),
//                            source: ace.vars['US_STATES']
//                        }
//                );
//                alert("xxa");
//                var $tag_obj = $('#form-field-tags').data('tag');
//                $tag_obj.add('Programmatically Added');
//                alert(e.message);
//                //display a textarea for old IE, because it doesn't support this plugin or another one I tried!
//                tag_input.after('<textarea id="'+tag_input.attr('id')+'" name="'+tag_input.attr('name')+'" rows="3">'+tag_input.val()+'</textarea>').remove();
//                //$('#form-field-tags').autosize({append: "\n"});
//        })

$.mask.definitions['~']='[+-]';
$('.input-mask-date').mask('99/99/9999');
$('.input-mask-phone').mask('(999) 999-9999');
$('.input-mask-eyescript').mask('~9.99 ~9.99 999');
$(".input-mask-product").mask("a*-999-a999",{placeholder:" ",completed:function(){alert("You typed the following: "+this.val());}});
    </script>
{% endblock %}